<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <title>Document</title>
    <style>

        body{background-color: #ddd;overflow-x:hidden;overflow-y:auto;}
        .left-pannel{width: 20%;float: left;border-right:1px solid #aaa;background-color: white;}
        .pannel{width: 50%;float: left;margin-left: 5%;margin-right: 5%;}
        .right-pannel{width: 20%;float: left;}
        img{max-width:100%;}
        table.forcus{border: 5px dashed palegoldenrod;}
        .attrbox{display: none;}
    </style>
</head>
<body>
    <div class="left-pannel">
        <div class="chioce-box" id="logo">
            <h2>logo</h2>
            <img src="src/logo.png">
        </div>
        <div class="chioce-box" id="title">
            <h2>title</h2>
            <img src="src/title.png">
        </div>
        <div class="chioce-box" id="bannertext">
            <h2>bannertext</h2>
            <img src="src/bannertext.png">
        </div>
        <div class="chioce-box" id="product">
            <h2>product</h2>
            <img src="src/product.png">
        </div>
        <div class="chioce-box" id="text">
            <h2>text</h2>
            <img src="src/text.png">
        </div>
        <div class="chioce-box" id="footer1">
            <h2>footer1</h2>
            <img src="src/footer1.png">
        </div>
        <div class="chioce-box" id="footer2">
            <h2>footer2</h2>
            <img src="src/footer2.png">
        </div>
    </div>
    <div class="pannel">
        <table class="forcus" cellSpacing="0" cellPadding="0" align="center" border="0" style="width:100%;max-width:600px;">
            <tr>
                <td>
                    <a href="https://www.fashiondm.com/outerwear-c-4686.html?utm_source=edm&utm_medium=benchmarkemail&utm_campaign=2019.01.08"><img src="https://www.fashiondm.com/themes/fashiondm-v1/assets/img/edm/title1.gif" alt="アウター" width="100%"/></a>
                </td>
                <td>
                    <a href="https://www.fashiondm.com/tops-c-4671.html?utm_source=edm&utm_medium=benchmarkemail&utm_campaign=2019.01.08"><img src="https://www.fashiondm.com/themes/fashiondm-v1/assets/img/edm/title2.gif" alt="トップス" width="100%"/></a>
                </td>
                <td>
                    <a href="https://www.fashiondm.com/dress-c-4664.html?utm_source=edm&utm_medium=benchmarkemail&utm_campaign=2019.01.08"><img src="https://www.fashiondm.com/themes/fashiondm-v1/assets/img/edm/title3.gif" alt="ワンピース" width="100%"/></a>
                </td>
                <td>
                    <a href="https://www.fashiondm.com/bottoms-c-4679.html?utm_source=edm&utm_medium=benchmarkemail&utm_campaign=2019.01.08"><img src="https://www.fashiondm.com/themes/fashiondm-v1/assets/img/edm/title4.gif" alt="ボトムス" width="100%"/></a>
                </td>
            </tr>
        </table>
    </div>
    <div class="right-pannel">
        <div class="attrbox" id="logo-edit">
            <ul>
                <li><label>链接1：<input type="text" class="link1"></label></li>
                <li><label>链接2：<input type="text" class="link2"></label></li>
                <li><label>图片地址：<input type="text" class="imgsrc"></label></li>
                <li><label>文字：<input type="text" class="text"></label></li>
            </ul>
        </div>
    </div>
    <script>
        $(function() {
            //注册click事件
            $("#logo").click(() => {
                var mailstr = `
                <table tabtpye="logo" cellSpacing="0" cellPadding="0" align="center" border="0" style="width:100%;max-width:600px;">
                    <tr>
                        <td align="center">
                            <a href="https://www.dwstyle.com/?utm_source=edm&utm_medium=benchmarkemail&utm_campaign=2019.03.12"><img src="https://www.dwstyle.com/themes/hassyon-v1/assets/images/edm/2019-03-12/logo.gif" alt="Logo" width="100%"/></a>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" style="font-size:14px;">
                            <p><a href="https://www.dwstyle.com/?utm_source=edm&utm_medium=benchmarkemail&utm_campaign=2019.03.12" style="display:block;color:#fe0c34;text-decoration:none;overflow:hidden;">メールを確認することができない方はこちらへ！</a></p>
                        </td>
                    </tr>
                </table>
                `
                $(".pannel table").removeClass("forcus");
                $(".pannel").append(mailstr);
            })
        })
    </script>
    <script>
        $(function() {
            $(document).on("click","[tabtype]",()=>{
                if($("[tabtype='logo']").length){
                    $(".attrbox").hide();
                    $("#logo-edit").fadeIn("fast");

                    $("#logo-edit .link1").val($(this).find("a").eq(0).attr("href"));
                    $("#logo-edit .link2").val($(this).find("a").eq(1).attr("href"));
                    $("#logo-edit .imgsrc").val($(this).find("img").attr("src"));
                    $("#logo-edit .text").val($(this).find("p").children("a").text());
                }
            })
        })
    </script>
    <script>
        //取消table表格中所有元素默认事件，主要是跳转
        $(function(){
            $(document).on("click","table *",()=>{
                return false;
            })
        })
    </script>
</body>
</html>